The :is() and :where() pseudo-classes can be combined with type selectors, classes, IDs, and other pseudo-classes to simplify complex CSS selectors and make your code cleaner and more maintainable.

How to Combine :is() and :where()

1
Group multiple element types, classes, or pseudo-classes inside :is() or :where() to reduce repetition.
2
Combine with child (>) or descendant selectors for precise targeting, e.g., div:is(.card, .panel) > h2.
3
Use :where() for default styling without increasing specificity, especially for utility or global styles.
4
Combine with pseudo-classes like :hover, :focus, or :nth-child() for interactive or dynamic styling.

Example: Combining :is() with Other Selectors

In this example, :is() groups .card and .panel to style their headings together, :where() sets default paragraph color without increasing specificity, and :is() is also used to apply hover styles to links in multiple parent containers efficiently.

Best Practices

1
Use :is() when you want the selectors inside to maintain specificity for overriding purposes.
2
Use :where() for fallback or utility styles to avoid specificity conflicts.
3
Combine them with combinators and other pseudo-classes for concise and maintainable CSS.
4
Test across modern browsers to ensure compatibility and fallback gracefully if necessary.

Difficulty: 6/10

Topics: CSS specificity, selector optimization, maintainable styling

Scenario Questions

0-2 years experience

1
You have three buttons with different classes but the same hover style — how would you use :is() to combine them into one rule without repeating the styles?
2
If you write :where(.btn, .link, .card) { color: blue; }, what happens to the specificity compared to writing each selector separately?
3
You're told to clean up a CSS file with 10 duplicate rules for different form inputs — how would :is() help you reduce that?

2-5 years experience

1
A designer says the primary button’s hover state isn’t working anymore — you notice it’s being overridden by a global :where() rule. How do you debug and fix this without breaking other styles?
2
Your team’s component library uses :is() to group header variants, but now a new team is adding custom styles that break the pattern. How do you communicate the tradeoff between maintainability and flexibility?
3
You’re refactoring a legacy CSS file with 50+ similar rules for .nav-item, .sidebar-link, .footer-link — why might you choose :where() over :is() here, and what could go wrong?

5-8 years experience

1
You’re designing a scalable design system where components are reused across 10+ products — how do you decide whether to use :is() or :where() to avoid specificity wars in a global CSS environment?
2
A performance audit shows your CSS bundle is bloated due to duplicated selectors. How would you use :is() and :where() to optimize it, and what edge cases might you miss in a large codebase?
3
Your team uses :where() to simplify styling, but QA reports inconsistent behavior in IE11 and older Safari. How do you handle browser support while keeping the code clean?

8+ years experience

1
You’re leading a migration from a legacy CSS framework to a modern component library — how do you architect the transition to use :is() and :where() without breaking thousands of existing overrides across products?
2
Your company has 50+ micro-frontends with inconsistent CSS practices. How would you enforce a consistent pattern for grouping selectors using :is() and :where() across teams, and what governance or tooling would you put in place?
3
You’re evaluating whether to adopt :where() for all low-specificity resets in your global stylesheet. What long-term maintenance risks do you foresee, and how would you mitigate them in a 10-year codebase?

Follow-up Questions

❓How would you decide between :is() and :where() if you're seeing unexpected styles being overridden?
❓What happens if you nest :is() inside another complex selector — does specificity change?
❓Have you ever used these pseudo-classes to refactor legacy CSS? What challenges did you run into?